<template>
  <div>
    <van-popup
      v-model:show="props.show"
      position="bottom"
      closeable
      round
      @click-overlay="closePopup"
      @click-close-icon="closePopup"
      close-icon="close"
      :style="{ height: '60%' }"
    >
      <div class="title">图层切换</div>
      <div class="swit">
        <div class="layer">
          <div class="layerimg vect">
            <van-image
              width="5rem"
              height="5rem"
              round
              fit="cover"
              src="https://img.gejiba.com/images/f9e411ae4387eeb7ec56b28764f01b47.jpg"
              @click="selVect(props.basemap)"
            />
          </div>
          <div class="layertitle">矢量图</div>
        </div>
        <div>
          <div class="layerimg sat">
            <van-image
              width="5rem"
              height="5rem"
              round
              fit="cover"
              src="https://img.gejiba.com/images/8c85f9590e80e217248819dbcab15422.jpg"
              @click="selSat(props.basemap)"
            />
          </div>
          <div class="layertitle">卫星图</div>
        </div>
      </div>
      <div class="title">地图视角</div>
      <div class="swit">
        <my-button
          v-for="(item, index) in dim"
          :key="item.title"
          :img="item.src"
          :title="item.title"
          @click="getView(index)"
        ></my-button>
      </div>
      <div class="title">地图显示</div>
      <div class="swit">
        <my-button
          v-for="(item, index) in switlayer"
          :key="index"
          :img="item.src"
          :title="item.layertitle"
          @click="displayL(index)"
        ></my-button>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { switlayer, dim } from '../views/Home/map-data'
import { selVect, selSat, initMap } from '../map/map.js'
import MyButton from './MyButton.vue'
const props = defineProps({
  show: Boolean,
  basemap: Object,
})
// console.log(props)
const emit = defineEmits(['close'])
const closePopup = () => {
  emit('close')
}
const displayL = (e) => {
  emit('display', e)
}
const getView = (e) => {
  emit('getView', e)
  // console.log(e)
}
</script>

<style>
#map {
  position: absolute;
}
.search {
  position: absolute;
  z-index: 100;
  top: 3vh;
  right: 18vw;
}
.sides {
  position: absolute;
  z-index: 100;
  top: 10vh;
  right: 1vw;
  background-color: #fff;
  border-radius: 20px;
}
.side {
  padding: 15px;
  font-size: 14px;
  font-weight: 300;
}
.locat {
  position: absolute;
  z-index: 100;
  bottom: 8vh;
  left: 4vw;
}
.nav {
  position: absolute;
  z-index: 100;
  bottom: 8vh;
  right: 2vw;
}
.title {
  height: 60px;
  font-size: 20px;
  font-weight: 100;
  line-height: 60px;
  padding-left: 10px;
}
.swit {
  display: flex;
  flex-wrap: wrap;
}
.layer {
  padding: 0 10px 10px 10px;
}
.layerimg {
  padding: 14px;
}
.layertitle {
  padding-left: 27px;
  font-weight: 400;
}
.tool {
  padding: 17px 54px;
}
.notice {
  padding-left: 20px;
}
.nt {
  font-size: 10px;
  padding: 20px 0;
  color: gray;
}
.map {
  height: 100vh;
}
</style>
